<template>
  <div>
    <button @click="out">退出登录</button>
    <Test v-model="count" ref="TestRef" :change-name="changeName" />
    <button @click="count++">+1</button>
    <div>{{ count }}</div>
    <button @click="showToastHandler">调用子组件方法</button>
    <div>{{ name }}</div>
  </div>
</template>

<script setup>
import Test from '@/components/test/index.vue'

import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'

const store = useUserStore()
const router = useRouter()

const count = ref(0)
const TestRef = ref(null)
const name = ref('张三')

const changeName = (payload) => {
  name.value = payload
}

const showToastHandler = () => {
  TestRef.value.showToast('Hello')
}

const out = () => {
  showConfirmDialog({
    title: '提示',
    message: '您确定要退出登录吗？',
  })
    .then(() => {
      store.removeUserInfo()
      router.push('/login')
    })
    .catch(() => {})
}
</script>

<style scoped lang="less"></style>
